tengo algunas funciones

 function growSeparator() { $('.applications-worth-module__separator').addClass('applications-worth-module__separator--active'); } function reachPkt1() { $('.point-1-separator').addClass('point-separator--pkt1_active'); } function reachPkt2() { $('.point-2-separator').addClass('point-separator--pkt2_active'); } function reachPkt3() { $('.point-3-separator').addClass('point-separator--pkt3_active'); } function reachPkt4() { $('.point-4-separator').addClass('point-separator--pkt4_active'); }

Cada uno de ellos agrega clase css con animación de fotogramas clave en su interior. Intento ejecutar una función cuando el elemento llega a la mitad de la pantalla. Estoy usando getBoundingClientRect para hacerlo.

 var pkt1 = document.querySelector(".point-1__container"); var pkt2 = document.querySelector(".point-2__container"); var pkt3 = document.querySelector(".point-3__container"); var pkt4 = document.querySelector(".point-4__container"); window.addEventListener('scroll', (e) => { if (pkt1.getBoundingClientRect().top < window.innerHeight/2) { growSeparator(); } if (pkt1.getBoundingClientRect().top < (window.innerHeight/2)) { reachPkt1(); } if (pkt2.getBoundingClientRect().top < (window.innerHeight/2)) { reachPkt2(); } if (pkt3.getBoundingClientRect().top < (window.innerHeight/2)) { reachPkt3(); } if (pkt4.getBoundingClientRect().top < (window.innerHeight/2)) { reachPkt4(); } })

El problema es que cuando me desplazo al último elemento, todas las funciones se activan al mismo tiempo, no una por una. Traté de usar el evento "animationend" y "transitionend", pero solo funciona para un elemento y para otros cuatro, no.

¿Cómo puedo lograr este efecto, cuando me desplazo al último elemento (.point-4__container) todas mis funciones anteriores se ejecutan una tras otra?

Gracias.